<template>
    <el-container class="home-container">
        <el-aside :width="iscollapse?'64px':'200px'" :style="iscollapse?'background-color: #FF9B9B;':'background-color: #0083a1;'">
            <div class="collapse" @click="clickCollapse">
                <i :class="iscollapse?'el-icon-sunrise-1':'el-icon-sunny'"></i>
            </div>
            <el-menu :collapse="iscollapse" :background-color="iscollapse?'#FF9B9B':'#0083A1'" text-color="#fff" active-text-color="#409eff" mode :collapse-transition="false" router menu-trigger="click" :default-active="activePath">
                <el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id">
                    <template #title>
                        <i :class="iconsObj[item.id]"></i>
                        <span>{{item.authName}}</span>
                    </template>
                    <el-menu-item v-for="subitem in item.children" :key="subitem.id" :index="'/'+subitem.path" @click="saveActive('/'+subitem.path)">
                        <template #title>
                            <i :class="subiconsObj[subitem.id]"></i>
                            <span>{{subitem.authName}}</span>
                        </template>
                    </el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header height="100px">
                <div>
                    <div>
                        <img src="../assets/images/tao.png" alt="" srcset="">
                        <span>水蜜桃溯源系统</span>
                    </div>
                    <div> {{this.date}}</div>
                    <el-button type="primary" @click="exit">
                        退出
                    </el-button>
                </div>
            </el-header>
            <el-main>
                <el-scrollbar>
                    <el-card>
                        <router-view></router-view>
                    </el-card>
                </el-scrollbar>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    data () {
        return {
            menulist: [],
            iconsObj: {
                '125': 'el-icon-user-solid',
                '103': 'el-icon-star-on',
                '101': 'el-icon-goods',
                '102': 'el-icon-shopping-cart-full',
                '145': 'el-icon-s-marketing',
                '1': 'el-icon-s-help',
                '2': 'el-icon-upload'
            },
            subiconsObj: {
                '110': 'el-icon-user',
                '111': 'el-icon-s-custom',
                '112': 'el-icon-s-promotion',
                '104': 'el-icon-s-shop',
                '115': 'el-icon-s-grid',
                '121': 'el-icon-shopping-bag-1',
                '107': 'el-icon-shopping-cart-1',
                '146': 'el-icon-data-line',
                '3': 'el-icon-help',
                '4': 'el-icon-coin'
            },
            iscollapse: false,
            activePath: '',
            date: ''
        }
    },
    created () {
        this.getMenuList()
        this.activePath = sessionStorage.getItem('activePath')
        this.iscollapse = JSON.parse(sessionStorage.getItem('iscollapse'))
    },
    mounted () {
        setInterval(() => {
            this.getTime()
        }, 1000);
    },
    methods: {
        exit () {
            sessionStorage.removeItem('token')
            this.$router.push({
                name: 'login'
            })
        },
        async getMenuList () {
            const { data: res } = await this.$http.get('menus')
            if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
            res.data.push({
                authName: "区块应用",
                children: [{ authName: "区块溯源", path: "ipfs", id: 3 }],
                id: 1,
                path: "ipfs"
            }, {
                authName: "星际系统",
                children: [{ authName: "ipfs数据", path: "web3", id: 4 }],
                id: 2,

            })
            console.log(res.data);
            this.menulist = res.data
            console.log('获取左侧导航菜单列表', res);
        },
        clickCollapse () {
            this.iscollapse = !this.iscollapse
            sessionStorage.setItem('iscollapse', this.iscollapse)
        },
        saveActive (activePath) {
            sessionStorage.setItem('activePath', activePath)
        },
        getTime () {
            const date = new Date()
            const year = date.getFullYear();    //获取当前年份   
            let month = date.getMonth() + 1;  //获取当前月份   
            month = month < 10 ? "0" + month : month
            let day = date.getDate();         //获取当前日   
            day = day < 10 ? "0" + day : day
            let hour = date.getHours();         //获取小时         
            hour = hour < 10 ? "0" + hour : hour
            let minute = date.getMinutes();     //获取分钟   
            minute = minute < 10 ? "0" + minute : minute
            let second = date.getSeconds();     //获取秒   
            second = second < 10 ? "0" + second : second
            this.date = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
        }
    }
}
</script>

<style lang="less" scoped>
.home-container {
    height: 100%;
    .el-header {
        background-color: #dfe9eb;
        color: #008baa;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 20px;
        > div {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 0px 20px;
            background-color: white;
            border-radius: 25px;
            box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
            > div {
                width: 100%;
                display: flex;
                align-items: center;
                color: #0083a1;
            }
            .el-button {
                background-color: #0083a1;
                border: none;
            }
        }
        img {
            width: 100px;
            height: 100px;
        }
    }
    .el-aside {
        overflow: hidden;
        .collapse {
            display: flex;
            justify-content: center;
            color: white;
            font-size: 40px;
            margin-top: 35px;
            margin-bottom: 30px;
        }
        .el-submenu__icon-arrow,
        .el-icon-arrow-down {
            color: white;
        }
        ::v-deep .el-menu--collapse {
            position: absolute;
        }
        ::v-deep .el-submenu__title i {
            color: white;
        }
        .el-menu {
            border-right: 0px;
        }
    }
    .el-main {
        background-color: #dfe9eb;
    }

    .el-card {
        border-radius: 25px;
    }
}
</style>